<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/favicon.svg" sizes="any">
    <title>{{.Title}} - Obsidian Share</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f8f9fa;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .document-header {
            border-bottom: 1px solid #e9ecef;
            padding-bottom: 20px;
            margin-bottom: 20px;
        }
        .document-title {
            font-size: 2em;
            margin: 0 0 10px 0;
            color: #333;
        }
        .document-meta {
            color: #6c757d;
            font-size: 0.9em;
        }
        .document-content {
            font-size: 16px;
        }
        .password-form {
            text-align: center;
            padding: 40px 20px;
        }
        .password-input {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-right: 10px;
            width: 200px;
        }
        .password-button {
            padding: 10px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .error-message {
            color: #dc3545;
            margin-top: 10px;
        }
        .expired-message {
            text-align: center;
            padding: 40px 20px;
            color: #dc3545;
        }
    </style>
</head>
<body>
    <div class="container">
        {{if .ShowPasswordForm}}
            <div class="password-form">
                <h2>此文档需要密码</h2>
                <form method="post" action="/d/{{.UUID}}/verify">
                    <input type="password" name="password" class="password-input" placeholder="请输入密码" required>
                    <button type="submit" class="password-button">查看文档</button>
                </form>
                {{if .ErrorMessage}}
                    <div class="error-message">{{.ErrorMessage}}</div>
                {{end}}
            </div>
        {{else if .IsExpired}}
            <div class="expired-message">
                <h2>文档已过期</h2>
                <p>此文档已超过有效期，无法查看。</p>
            </div>
        {{else}}
            <div class="document-header">
                <h1 class="document-title">{{.Title}}</h1>
                <div class="document-meta">
                    作者: {{.Author}} |
                    创建时间: {{.CreatedAt}} |
                    浏览量: {{.Views}}
                    {{if .ExpiresAt}}
                        | 过期时间: {{.ExpiresAt}}
                    {{end}}
                </div>
            </div>
            <div class="document-content">
                {{.ContentHTML}}
            </div>
        {{end}}
    </div>
</body>
</html>
